<template>
  <div>
    <div class="tab_wrap">
      <div class="tab_title">
        <i class="el-icon-menu"></i>
        <div>系统人员</div>
      </div>
      <el-table border
                stripe
                :data="adminList">
        <el-table-column label="用户名"
                         prop="userName">

        </el-table-column>
        <el-table-column label="姓名"
                         prop="turename">

        </el-table-column>
        <el-table-column label="后台权限">
          <template slot-scope="scope">
            <div>
              {{scope.row.power=='1'?'系统管理员':'课程管理员'}}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="手机"
                         prop="phone">

        </el-table-column>
        <el-table-column label="编辑日期">
          <template slot-scope="scope">
            <div>
              {{new Date(scope.row.createAt).toLocaleString()}}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div>
              <el-link type="success"
                       @click="edit(scope.row)">编辑</el-link>
              <el-link type="danger"
                       @click="del(scope.row.tokenId)">删除</el-link>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :total="count"
                     background
                     :page-size="pageSize"
                     @current-change="pageChange"
                     layout="prev,pager,next">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { delAdmin } from '../../api/admin'
export default {
  name: 'Ljfvue2011Admintable',
  props: ["count", "pageSize", "adminList"],
  data () {
    return {

    }
  },

  mounted () {

  },

  methods: {
    edit (row) {//点击编辑
      this.$store.commit("changeAdminDia", true)
      this.$bus.$emit("sendedit", row)
    },
    async del (id) {//删除管理员
      var res = await delAdmin(id)
      if (res.data.success) {
        this.$message({
          message: "删除成功",
          type: "success"
        })
        // 删除后 重新渲染列表
        this.$parent.getAdminList();
      }
    },
    pageChange (val) { //分页改变事件
      console.log(val) //最新的页码
      // 用新的页码 获取列表数据
      this.$parent.getAdminList(val)
    }
  },
};
</script>

<style lang="less" scoped>
.tab_title {
  width: 100%;
  display: flex;

  i {
    width: 40px;
    height: 40px;
    border: 2px solid red;
    font-size: 40px;
  }
  div {
    flex: 1;
    height: 44px;
    line-height: 44px;
    font-size: 20px;
    padding-left: 30px;
    box-sizing: border-box;
    border-top: 2px solid red;
    border-right: 2px solid red;
    border-bottom: 2px solid red;
  }
}
</style>